<template>
	<view class="container">
		<view class="login-container">
			<view class="login-info">
				<view class="login-avatar-text" @click="avatarClick">
					<image class="login-avatar" mode="aspectFill" :src="avatarUrl || '/static/logo.png'">
					</image>
				</view>
				<view class="login-text">
					{{nickname || ''}}
				</view>
			</view>
		</view>
		<view class="gaps"></view>
		<view class="sq-panel">
			<view class="panel-tip">
				VIP积分
			</view>
			<view class="panel-body">
				<view class="coin-panel">
					<view>
						<image src="@/static/icons/coin.png" mode="aspectFill" class="coin-class"></image>
					</view>
					<view class="balance">{{ priceTransform(walletYue, 2, '') }}</view>
				</view>

			</view>
		</view>
		<!-- <div class="card-container"> -->

		<!-- <div class="card balance-card">
				<div class="card-title">消费折返</div>
				<div class="balance">{{ priceTransform(walletYue) }}</div>
			</div> -->

		<!-- <div class="card bonus-card">
				<div class="card-title">推广积分</div>
				<div class="bonus">{{ priceTransform(promoteYue) }}</div>
			</div> -->

		<!-- </div> -->
		
		
		<view class="gaps"></view>
		<view class="sq-panel">
			<view class="panel-tip">
				我的
			</view>
			<view class="panel-body">
				<uni-grid :column="4" :highlight="true" @change="selectMyGrid" :show-border="false">
					<uni-grid-item :index="1">
						<view class="grid-item-box">
							<uni-icons  type="gift" size="30"></uni-icons>
							<text class="text">我的奖品</text>
						</view>
					</uni-grid-item>
			</uni-grid>
			</view>
		</view>
		
		<view class="gaps"></view>
		<view class="sq-panel" v-if="merchant == 2">
			<view class="panel-tip">
				商家服务
			</view>
			<view class="panel-body">
				<uni-grid :column="4" :highlight="true" @change="selectGrid" :show-border="false">
					<uni-grid-item :index="2">
						<view class="grid-item-box">
							<uni-icons custom-prefix="sqfont" type="icon-repair" size="30"></uni-icons>
							<text class="text">店铺设置</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="1">
						<view class="grid-item-box">
							<uni-icons custom-prefix="sqfont" type="icon-goods" size="30"></uni-icons>
							<text class="text">商品管理</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="5">
						<view class="grid-item-box">
							<uni-icons custom-prefix="sqfont" type="icon-order" size="30"></uni-icons>
							<text class="text">店铺订单</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="13">
						<view class="grid-item-box">
							<uni-icons type="shop" size="30"></uni-icons>
							<text class="text">二维码</text>
						</view>
					</uni-grid-item>

					<uni-grid-item :index="14">
						<view class="grid-item-box">
							<uni-icons type="shop" size="30"></uni-icons>
							<text class="text">营销活动</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="gaps"></view>

		<uni-popup ref="codePop" type="center" v-if="merchant == 2">
			<view class="code-pop-area">
				<image :src="codeUrl" mode="scaleToFill" class="code-img"></image>
				<button size="mini" type="primary" @click="downCode">下载二维码</button>
			</view>
		</uni-popup>

	</view>
</template>
<script>
import {
	updateInfo,
	getMyWallet,
	getMyShop,
	getMyInfo,
	getUserPhone,
	getMyShopCode
} from '@/api/my/my'
import {
	transform
} from '@/minix/mixin.js'
import uploadFile from '@/utils/uploadFile.js'

export default {
	mixins: [transform],
	data() {
		return {
			avatarUrl: "",
			nickname: "",
			hasLogin: false,
			merchant: 0,
			walletYue: 0,
			promoteYue: 0,
			shopId: '',
			formData: {
				avatarUrl: "",
				nickname: "",
				phone: ""
			},
			codeUrl: '',
		}
	},
	onLoad() {
		this.init()
	},
	onPullDownRefresh() {
		this.init()
		uni.stopPullDownRefresh()
	},

	methods: {
		async init() {
			let myInfo = await getMyInfo()
			uni.setStorageSync("userinfo", myInfo)
			this.avatarUrl = myInfo.imageUrl
			this.nickname = myInfo.nickname
			this.merchant = myInfo.identityType
			this.phone = myInfo.phone

			// 查询钱包信息
			if (myInfo.identityType !== 0) {
				this.hasLogin = true
				getMyWallet().then((res) => {
					this.walletYue = res.backMoney;
					this.promoteYue = res.promoteMoney;
				})
			}
			// 查询商铺信息
			if (myInfo.identityType == 2) {
				getMyShop().then(res => {
					this.shopId = res
				})
			}
		},
		// ruzhuOrzhuye() {
		// 	if (this.merchant == 0) {
		// 		this.openPop()
		// 	} else if (this.merchant == 1) {
		// 		uni.navigateTo({
		// 			url: '/subpkg/consumer/businessStore/businessStore'
		// 		})
		// 	}
		// },

		withdrawPromote() {
			// 提现推广费用
			uni.navigateTo({
				url: '/subpkg/consumer/promo/promo'
			})
		},
		avatarClick() {
			uni.navigateTo({
				url: '/subpkg/consumer/myInfo/myInfo'
			})
		},

		async getShopCodeUrl() {
			if (!this.codeUrl) {
				const r = await getMyShopCode()
				if (r) {
					this.codeUrl = r
				}
				this.$refs.codePop.open()
			} else {
				this.$refs.codePop.open()
			}
		},
		async downCode() {
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success: () => {
					this.beginDownloadCode()
				},
				fail: async () => {
					const res = await uni.getSetting()
					const auth = res[1].authSetting
					if (auth['scope.writePhotosAlbum']) {
						this.beginDownloadCode()
					} else {
						const r = await uni.showModal({
							title: '下载二维码需要您开启保存到相册权限',
							confirmText: '授权',
						})
						if (r[1].confirm) {
							const re = await uni.openSetting()
							const au = re[1].authSetting
							if (au['scope.writePhotosAlbum']) {
								this.beginDownloadCode()
							} else {
								uni.showToast({
									icon: 'none',
									title: '保存到相册功能未开启'
								})
							}

						}
					}
				}
			})
		},
		beginDownloadCode() {
			uni.showLoading({
				title: '正在下载...',
				mask: true
			})
			uni.downloadFile({
				url: this.codeUrl,
				timeout: 5000,
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success() {
							uni.showToast({
								icon: 'none',
								title: '下载成功，请在相册中查看'
							})
						}
					})
				},
				complete: (r) => {
					uni.hideLoading()
				}
			})
		},
		selectMyGrid(e) {
			let sel = e.detail.index
			switch(sel) {
				case 1:
				uni.navigateTo({
					url:'/subpkg/consumer/myPrizes/myPrizes'
				})
			}
		},
		selectGrid(e) {
			let seleced = e.detail.index
			switch (seleced) {
				// 商品管理
				case 1:
					uni.navigateTo({
						url: '/subpkg/shops/goodsManage/goodsManage?shopId=' + this.shopId
					})
					break
				case 2:
					uni.navigateTo({
						url: '/subpkg/shops/shopSetting/shopSetting?shopId=' + this.shopId
					})
					break
				case 3:
					uni.navigateTo({
						url: '/subpkg/shops/shopRecommended/shopRecommended?shopId=' + this.shopId
					})
					break
				case 4:
					uni.navigateTo({
						url: '/subpkg/shops/dataCenter/dataCenter?shopId=' + this.shopId
					})
					break
				case 5:
					uni.navigateTo({
						url: '/subpkg/shops/shopOrder/shopOrder?shopId=' + this.shopId
					})
					break
				// case 6:
				// 	uni.navigateTo({
				// 		url: '/subpkg/shops/cashout/cashout?shopId=' + this.shopId
				// 	})
				// 	break
				case 7:
					uni.navigateTo({
						url: '/subpkg/shops/blueTooth/blueTooth'
					})
					break
				case 9:
					uni.navigateTo({
						url: '/subpkg/shops/fliers/fliers?shopId=' + this.shopId
					})
					break
				case 10:
					uni.navigateTo({
						url: '/subpkg/staffManagement/employee/index?shopId=' + this.shopId
					})
					break
				case 12:
					uni.navigateTo({
						url: '/subpkg/staffManagement/prizeCheck/index?shopId=' + this.shopId
					})
					break
				case 13:
					this.getShopCodeUrl()
					break
				case 14:
					uni.navigateTo({
						url: '/subpkg/shops/marketing/marketing?shopId=' + this.shopId
					})


			}
		}
	}
}
</script>
<style lang="scss">
.balance,
.bonus {
	font-size: 28px;
	font-weight: 600;
	color: #444;
	text-align: center;
	height: 30px;
	line-height: 30px;
}

.coin-panel {
	display: flex;
	justify-content: center;
	align-content: center;

	.coin-class {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
}


.login-container {
	background-image: linear-gradient(to top right, #b6e2ff, #ffd9b8);
	height: 200rpx;
	width: 100%;

	.login-info {
		display: flex;
		justify-content: flex-start;
		padding-top: 40rpx;
		align-items: center;
		.login-avatar {
			border-radius: 5px;
			height: 120rpx;
			width: 120rpx;
			margin-left: 20rpx;
		}
		.login-text {
			margin-left: 20rpx;
			font-size: 20px;
			font-weight: bold;
		}
	}
}


.grid-item-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;

	image {
		width: 30px;
		height: 30px;
	}
}

.code-pop-area {
	display: flex;
	flex-direction: column;
	align-items: center;

	.code-img {
		width: 200px;
		height: 200px;
	}

	button {
		margin-top: 5px;
	}
}
</style>